<template>
  <el-card>
    <el-line title="新增制度"></el-line>
    <el-form   style="margin-top: 10px;" :label-width="labelwidth" ref="systemRef" :rules="systemRules" :model="systemForm" class="demo-form-inline">
      <el-row>
        <el-col :span="12">
          <el-form-item label="制度名称" prop="systemName">
            <el-input v-model="systemForm.systemName" placeholder="请输入制度名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="制度类型">
            <el-select
                v-model="systemForm.systemType"
                placeholder="请选择制度类型"
                clearable
            >
              <el-option v-for="dict in system_type" :key="dict.value" :value="dict.value" :label="dict.label"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="制度文件">
            <el-upload
                v-model:file-list="fileList"
                class="upload-demo"
                :action="uploadFileUrl"
                :headers="headers"
                multiple
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-exceed="handleExceed"
            >
              <el-button>选择文件</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  <!--                        jpg/png files with a size less than 500KB.-->
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <div style="text-align: center">
        <el-button class="btnWidth" type="primary" @click="onSubmit">保存</el-button>
        <el-button class="btnWidth" type="info" @click="systemFormRest">清空</el-button>
      </div>
    </el-form>
  </el-card>
  <el-card style="margin-top: 20px">
    <el-form  ref="systemParamRef" :model="systemParamForm" class="demo-form-inline">
      <el-row>
        <el-col :span="5" :offset="1">
          <el-form-item label="制度名称">
            <el-input v-model="systemParamForm.systemName" placeholder="请输入制度名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-form-item label="上传人">
            <el-input v-model="systemParamForm.uploadUserName" placeholder="请输入上传人"/>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-form-item label="制度类型">
            <el-select
                v-model="systemParamForm.systemType"
                placeholder="请选择制度类型"
                clearable
            >
              <el-option v-for="dict in system_type" :key="dict.value" :value="dict.value" :label="dict.label"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="2">
          <el-button class="btnWidth" type="primary" @click="getList">查询</el-button>
          <el-button class="btnWidth" type="info" @click="systemParamFormRest">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row style="margin-bottom: 10px;">
      <el-button class="btnWidth"  type="danger" @click="delSystems">删除</el-button>
      <el-button class="btnWidth"  type="warning" @click="exportSystem">导出</el-button>
    </el-row>
    <el-table
        ref="multipleTableRef"
        :data="tableData"
        :row-class-name="tableRowClassName"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"/>
      <el-table-column type="index" width="100" label="序号"/>
      <el-table-column label="制度名称" property="systemName"/>
      <el-table-column property="systemFile" label="制度文件">
        <template #default="scope">
          <el-link icon="el-icon-document-remove" style="display: block;color: #577cfa"
                   v-for=" img in tableData[scope.row.index].workFiles"
                   :href="img.fileUrl" target="_blank" :download="img.fileName">
            {{ img.fileName }}
          </el-link>

        </template>
      </el-table-column>
      <el-table-column property="systemType" label="制度类型">
        <template #default="scope">
          <dict-tag :options="system_type" :value="scope.row.systemType"/>
        </template>
      </el-table-column>
      <el-table-column property="uploadUserName" label="上传人"/>
      <el-table-column property="uplodaDate" label="上传日期"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑
          </el-button>
          <el-button v-if="scope.row.parentId != 0" link type="primary" icon="Delete"
                     @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="systemParamForm.pageNum"
        v-model:limit="systemParamForm.pageSize"
        @pagination="getList"
    />
  </el-card>
  <el-dialog draggable align-center v-model="openSystem" title="修改制度"
             style="height: 350px;margin-top: 200px !important;">
    <el-form  :label-width="labelwidth" ref="systemUpdateRef" :rules="systemRules" :model="systemViewForm" class="demo-form-inline">
      <el-row>
        <el-col :span="12">
          <el-form-item label="制度名称" prop="systemName">
            <el-input v-model="systemViewForm.systemName" placeholder="请输入制度名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="制度类型">
            <el-select
                v-model="systemViewForm.systemType"
                placeholder="请选择制度类型"
                clearable
            >
              <el-option v-for="dict in system_type" :key="dict.value" :value="dict.value" :label="dict.label"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="制度文件">
            <el-upload
                v-model:file-list="fileViewList"
                class="upload-demo"
                :action="uploadFileUrl"
                :headers="headers"
                multiple
            >
              <el-button>选择文件</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  <!--                        jpg/png files with a size less than 500KB.-->
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="openSystem = false">取消</el-button>
        <el-button type="primary" @click="updateSystemM">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {downloadByBlob} from "../../../utils/ruoyi.js";

const {proxy} = getCurrentInstance();
const {system_type} = proxy.useDict("system_type");
import {addSystem, list, delSyatem, getInfo, updateSystem} from "../../../api/jobAid/system_manage.js";
import {ref} from 'vue'
import {getToken} from "@/utils/auth";

let labelwidth = 80;
const total = ref(0);
let openSystem = ref(false);
const systemData = reactive({
  systemForm: {
    systemName: '',
    systemType: '',
  },

  systemViewForm: {
    systemName: '',
    systemType: '',
  },
  systemRules: {
    systemName: [{required: true, message: "制度名称不能为空", trigger: "blur"}],
  },
  systemParamForm: {
    pageNum: 1,
    pageSize: 10,
    systemName: '',
    uploadUserName: '',
    systemType: '',
  }
});

let tableData = ref([]);
const {systemForm, systemRules, systemParamForm, systemViewForm} = toRefs(systemData);
import {reactive} from 'vue';

const headers = ref({Authorization: "Bearer " + getToken()});
const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传文件服务器地址

/** 表单重置 */
function systemFormRest() {
  systemForm.value = {
    systemName: undefined,
    systemType: undefined,
  };
  fileList.value = [];
  proxy.resetForm("systemRef");
}


const ids = ref([]);

//导出
function exportSystem() {
  systemParamForm.value.ids = ids.value;
  proxy.download("jobAid/manage/export", {
    ...systemParamForm.value,
  }, `job_${new Date().getTime()}.xlsx`);
  systemParamForm.value.ids = null;

}

//编辑
function handleUpdate(row) {
  systemFormViewRest();
  getInfo(row.sid).then((res) => {
    systemViewForm.value = res.data;
    openSystem.value = true;
    fileViewList.value = res.data.workFiles.map(t => {
      var obj = {}
      obj.url = t.fileUrl
      obj.name = t.fileName
      obj.filePath = t.filePath
      return obj
    })
  })
}
function systemFormViewRest(){
  systemViewForm.value = {};
  fileViewList.value = [];
}
const onSubmit = () => {
  proxy.$refs["systemRef"].validate(valid => {
    if (valid) {
      systemForm.value.fileList = fileList.value;
      addSystem({...systemForm.value}).then(res => {
        if (res.code === 200) {
          systemFormRest();
          proxy.$modal.msgSuccess("保存成功");
          getList();
        }
      })
    }
  });
}

function updateSystemM() {
  proxy.$refs["systemUpdateRef"].validate(valid => {
    if (valid) {
      systemViewForm.value.fileList = fileViewList;
      updateSystem(systemViewForm.value).then((res) => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess("修改成功");
          getList();
          openSystem.value = false;
        }
      })
    }
  })
}

//删除
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除?').then(function () {
    return delSyatem(row.sid);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {
  });

}

function delSystems() {
  if (ids.value.length == 0) {
    proxy.$modal.msgWarning("请选择要删除的数据");

    return;
  }
  proxy.$modal.confirm('是否确认删除?').then(function () {
    return delSyatem(ids.value);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {
  });
}

function getList() {
  list(systemParamForm.value).then(response => {
    tableData.value = response.rows;
    total.value = response.total;
  });
}

function systemParamFormRest() {
  systemParamForm.value = {
    systemName: undefined,
    uploadUserName: undefined,
    systemType: undefined,
  };
  proxy.resetForm("systemParamRef");
  getList();
}

const fileList = ref([]);
const fileViewList = ref([]);

const handleRemove = (file) => {

}

const handleSelectionChange = (selection) => {
  ids.value = selection.map(item => item.sid);
}

function tableRowClassName({row, rowIndex}) {
  row.index = rowIndex;
}

const handlePreview = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed = () => {

}

const beforeRemove = (uploadFile, uploadFiles) => {

}
getList();
</script>
>

<style scoped lang="scss">
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.app-container {
  background-color: #f2f2f2;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.btnWidth {
  width: 80px;
}
</style>
